<template>
	<div class="container home">
		<div class="header" style="height: 10px;background: none;">
			<Header></Header>
		</div>
		<el-button style="margin-top:20px" @click="goBack">返回</el-button>
		<div class="container-main" style="padding-top:15px">
			
			<!-- <div class="position-main">
				<div class="wd1200">
					<div class="position"><span>首页</span><span>预警通</span>按公司</div>
				</div>
			</div> -->
			<div class="wd12000">
				<!-- <div class="search-main overflow">
					<div class="search-right fr">
						<el-button type="primary" @click="searchbt">搜索</el-button>
						<el-button type="primary" @click="add">添加企业</el-button>
					</div>
					<div class="search-left overflow"><el-input v-model="companyName" placeholder="请输入企业名称"></el-input></div>
				</div> -->
				<div class="favorite-companies"  v-loading="loading">
					
					<div class="table-box">
						<el-table :data="comforuserlist" border style="width: 100%">
							<el-table-column type="index" label="序号" width="72">
								<template slot-scope="scope">
								    <span>{{(compageNumber - 1) * 10 + scope.$index + 1}}</span>
								</template>
							</el-table-column>
							<el-table-column label="企业名称" width="300">
								<template slot-scope="scope">
									<span class="pointer" style="color: #0071DF;" v-if="scope.row.companyName != null" @click="details(scope.row.companyId)">{{scope.row.companyName}}</span>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="工商变更">
								<template slot-scope="scope">
									<div v-if="scope.row.gs != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.gs > 0" @click="details(scope.row.companyId)">{{scope.row.gs}}</span>
										<span v-else>{{scope.row.gs}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="司法">
								<template slot-scope="scope">
									
									<div v-if="scope.row.sf != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.sf > 0" @click="details(scope.row.companyId)">{{scope.row.sf}}</span>
										<span v-else>{{scope.row.sf}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="经营">
								<template slot-scope="scope">
									
									<div v-if="scope.row.jy != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.jy > 0" @click="details(scope.row.companyId)">{{scope.row.jy}}</span>
										<span v-else>{{scope.row.jy}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="知识产权">
								<template slot-scope="scope">
									
									<div v-if="scope.row.cq != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.cq > 0" @click="details(scope.row.companyId)">{{scope.row.cq}}</span>
										<span v-else>{{scope.row.cq}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="招投标">
								<template slot-scope="scope">
									
									<div v-if="scope.row.tb != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.tb > 0" @click="details(scope.row.companyId)">{{scope.row.tb}}</span>
										<span v-else>{{scope.row.tb}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
							<el-table-column label="融资">
								<template slot-scope="scope">
									
									<div v-if="scope.row.rz != null">
										<span class="pointer" style="color: #0071DF;" v-if="scope.row.rz > 0" @click="details(scope.row.companyId)">{{scope.row.rz}}</span>
										<span v-else>{{scope.row.rz}}</span>
									</div>
									<span v-else>--</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination overflow" style="padding-top: 20px;">
							<el-pagination class="fr" @current-change="comChange" background
								layout="prev, pager, next" :page-size="10"
								:total="comforusertotal">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		collectlistapi,
		addsearchapi,
		comforuserapi
	} from "@/api/warning/index";
	import {
		removeapi
	} from "@/api/enterprise/index";
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				companieslist:[],
				total:0,
				endDate:'',
				companyName:'',
				collecttotal:0,
				userId:'',
				phonenumber:'',
				comforusertotal: 0,
				comforuserlist: [],
				compageNumber:1,
				startDate:"",
				loading:true,
				dType:0
			}
		},
		created() {
			if(JSON.parse(sessionStorage.getItem('user') != null)){
				this.userdata = JSON.parse(sessionStorage.getItem('user'));
				this.userId = JSON.parse(sessionStorage.getItem('userId'));
				this.phonenumber = this.userdata.phonenumber
			}
			function formatDate(date) {
			  const year = date.getFullYear();
			  const month = ('0' + (date.getMonth() + 1)).slice(-2);
			  const day = ('0' + date.getDate()).slice(-2);
			  const hours = ('0' + date.getHours()).slice(-2);
			  const minutes = ('0' + date.getMinutes()).slice(-2);
			  const seconds = ('0' + date.getSeconds()).slice(-2);
			  return `${year}-${month}-${day}`;
			}
			const date = new Date();
			this.endDate = formatDate(date);
			this.startDate = this.$route.query.startDate
			this.dType = this.$route.query.dType
			this.collectinit()
			this.comforuserinit()
		},
		mounted() {
			
		},
		methods:{
			goBack() {
			    this.$router.go(-1); // 或者 this.$router.back()
			},
			comforuserinit() {
				let queryParams = {
					dType: this.dType,
					endDate: this.endDate,
					pageNumber: this.compageNumber,
					pageSize: 10,
					startDate: this.startDate,
					userId: this.userId
				}
				comforuserapi(queryParams).then(res => {
					this.loading = false
					if (res.errcode == 0) {
						this.comforuserlist = res.data.content
						this.comforusertotal = res.data.total
						var alltotal = 0;
						for (var i = 0; i < res.data.content.length; i++) {
							alltotal += res.data.content[i].total;
						}
						this.alltotal = alltotal
						return alltotal;
			
					}
			
				});
			},
			comChange(val) {
				this.loading = true
				this.compageNumber = val
				this.comforuserinit()
			},
			async collectinit(){
				let userId = this.userId
				collectlistapi(userId).then(res => {
					this.companieslist = res.data.rows
					this.total = res.data.total
				})
			},
			collectremove(id) {
				removeapi(id).then(res => {
					if(res.errcode == 0){
						this.$message({
						  showClose: true,
						  message: '取消成功',
						  type: 'success'
						});
						this.collectinit()
					}
				});
			},
			add(){
				this.$router.push({ path:'/addenterprise'})
			},
			searchbt(){
				let queryParams = {
					companyName:"%"+this.companyName+"%",
					endDate:this.endDate,
					pageNumber:1,
					pageSize:20,
					phonenumber:this.phonenumber,
					userId:this.userId
				}
				addsearchapi(queryParams).then(res => {
					this.companieslist = res.data.content
					this.total = res.data.total
				})
			},
			details(id) {
				this.$router.push({
					path: '/details',
					query: {
						id: id,
						wdtype:1
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		.header {
			height: 418px;
			background: url(../../assets/images/banner.png) no-repeat left center;
		
			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;
		
				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;
		
					img {
						margin-right: 11px;
					}
				}
		
				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;
		
					.box {
						position: relative;
						height: 100px;
						line-height: 100px;
		
						span {
							position: absolute;
							left: 0;
							bottom: 0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}
		
					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}
		
					.box:last-child::after {
						display: none;
					}
		
				}
		
				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;
		
					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}
		
					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}

		}
		.position-main{
			border-bottom: 1px solid #E8EAEC;
			margin-bottom: 34px;
		}
		.position {
			font-weight: 400;
			font-size: 18px;
			color: #6F6F6F;
			line-height: 24px;
			margin: 24px 0;
			background: url(../../assets/images/iconhome.png) no-repeat left center;
			padding-left: 26px;
		
			span {
				color: #0071DF;
			}
		
			span::after {
				content: '/';
				margin: 0 12px;
				color: #6F6F6F;
			}
		}
		.search-main{
			.search-right{
				margin-left: 16px;
			}
		}
		.favorite-companies{
			.title{
				font-weight: 400;
				font-size: 15px;
				color: #000000;
				line-height: 52px;
				span{
					color:#FF8C1A
				}
			}
		}
	}
</style>
<style>
	.el-table .cell {
		font-size: 16px;
		color: #000000;
		line-height: 25px;
		padding: 5px 20px;
		font-weight: 400;
	}

	.dialogtable .el-table .cell .el-table--border .el-table__cell:first-child .cell {
		padding-left: 20px;
	}

	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background: #F7FBFF;
	}

	.dialogtable .el-table .cell {
		font-size: 14px;
		padding: 2px 15px;
	}

	.el-dialog__header {
		border-bottom: 2px dashed #eee;
	}
</style>